import { useRegister } from '@/hooks';
import { Link } from 'react-router-dom';
import { useEnter } from '@/hooks';
import { AuthWrapper } from '@/components';

const Register = () => {
   const { values, isFirstSubmit, handleChange, errors, handleSubmit } =
      useRegister();

   useEnter(handleSubmit);
   return (
      <AuthWrapper>
         <form>
            <div className="form-item">
               <div className="form-item-content">
                  <label>用户名</label>
                  <input
                     autoFocus
                     value={values.username}
                     onChange={handleChange('username')}
                  />
               </div>

               {!isFirstSubmit && errors.username && (
                  <div className="form-item-msg">{errors.username}</div>
               )}
            </div>

            <div className="form-item">
               <div className="form-item-content">
                  <label>手机号</label>
                  <input
                     value={values.phone}
                     onChange={handleChange('phone')}
                  />
               </div>

               {!isFirstSubmit && errors.phone && (
                  <div className="form-item-msg">{errors.phone}</div>
               )}
            </div>

            <div className="form-item">
               <div className="form-item-content">
                  <label>密码</label>
                  <input
                     value={values.password}
                     onChange={handleChange('password')}
                     type="new-password"
                  />
               </div>

               {!isFirstSubmit && errors.password && (
                  <div className="form-item-msg">{errors.password}</div>
               )}
            </div>

            <div className="form-item">
               <div className="form-item-content">
                  <label>确认密码</label>
                  <input
                     value={values.confirmPassword}
                     onChange={handleChange('confirmPassword')}
                     type="new-password"
                  />
               </div>

               {!isFirstSubmit && errors.confirmPassword && (
                  <div className="form-item-msg">{errors.confirmPassword}</div>
               )}
            </div>
         </form>
         <div className="btn mt-4" onClick={handleSubmit}>注册</div>
         <div className="text-center text-xs my-3">
            <span>已有账号？</span>
            <Link to="/login">点击登录</Link>
         </div>
      </AuthWrapper>
   );
};

export default Register;
